/* Many rules from the original styles.less are no longer needed. This
file is an attempt to do copying garbage collection since finding
unnecessary CSS rules is almost impossible by inspection.

Every time new rules are needed or old ones are modified, they should
be moved to this file. Over time the other file should become smaller
and more densely packed with unused rules and it will hopefully be
easier to determine if they're still needed.

Along with moving them here the rules should be cleaned up in a few ways:

- rules should be unnested when possible so they can be re-used
- Color literals should be pulled out into a global variable
- Colors that are already global variables should be replaced with the variable
- repetitive code should be pulled out into function-like mixins

This will also help porting if we move to another CSS preprocessor (say scss)
 */

@import "flexbox-mixins.less";

/* Colors */
@text-color: #5c6169;
@alternate-text-color: #626264;
@light-text-color: #9898A0;
@shard-title-color: #5c6169;
@link-color-hover: #005580;
@link-color: #0597d8;
@light-border-color: #cfcfd1;
@profile-icon-color: #d0d0d0;
@plot-border-color: #dcdcdc;
@dividing-line-color: #f0f0f0;
@status-separator-color: #e4e4e4;
@almost-white: #fafafa;
@profile-description-blue: #72bddf;
@status-bad-red: #e85250;
@status-good-green: #3ba51a;
@reads-plot-color: #729E51;
@writes-plot-color: #983434;
@axis-label-fill-color: #A3A3A3;
@dark-slate-gray: #444444;
@lighter-dark-slate-gray: #4c4c4c;
/* Fonts */
@sans: "Open Sans";
@serif: "Copse";
/* End of fonts */

/* Sizes */
@icon-size: 16px;
/* End of sizes */

/* Styling images */
@list-square-bullet: url(images/list-square-bullet.png);
@list-horiz-dash: url(images/list-horiz-dash.png);
@list-vert-dash: url(images/list-vert-dash.png);
/* End of styling images */

/* Icons */
@layers-icon: url(images/layers-icon.png);
@layers-exclamation-icon: url(images/layers-exclamation-icon.png);
@bars-icon: url(images/bars-icon_server-assignments.png);
@grid-icon: url(images/grid-icon.png);
@green-light-icon: url(images/green-light_glow.png);
@red-light-icon: url(images/red-light_glow.png);
@yellow-light-icon: url(images/yellow-light_glow.png);
/* End of Icons */
/* ionicon elements */
// Lazily pull these in from _ionicons-variables
@ion-monitor: "\f20a";
@ion-refresh: "\f21c";
@ion-pin: "\f2a6";
@ion-clock: "\f26e";
@ion-document: "\f12f";
@ion-pricetags-outline: "\f48e";
@ion-soup-can-outline: "\f4f3";

// Mapping from ionicon names to internal names
@hostname-icon: @ion-soup-can-outline;
@version-icon: @ion-refresh;
@uptime-icon: @ion-clock;
@cache-size-icon: @ion-document;
@tags-icon: @ion-pricetags-outline;
/* End of ionicon elements */

/* Standardized widths (keep this section minimal probably) */
@border-padding: 20px;
/* End of standardized padding */

/* Mixin functions */
.icon-before(@image; @icon-size: 16px; @padding: 10px) {
    // Add an icon before an element, centered vertically
    background-image: @image;
    background-position: 0 50%;
    background-repeat: no-repeat;
    padding-left: @icon-size + @padding;
}

.ionicon-before(@content, @xoffset: 0, @yoffset: 0) {
    content: @content;
    font-family: Ionicons;
    font-size: 20px;
    color: @profile-icon-color;
    padding: 0 10px 10px 0;
    left: 0 + @xoffset;
    top: 50% + @yoffset;
    position: absolute;
}

.icon-after(@image; @icon-size: 16px; @padding: 10px) {
    // Add an icon after an element, centered vertically
    background-image: @image;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    padding-right: @icon-size + @padding;
}

.dummy-before-boilerplate() {
    // Boilerplate for dummy ::before elements
    content: "";
    display: block;
    position: absolute;
}

.flex-evenly-spaced-centered {
    .flex();
    .flex-align-items(center);
    .flex-justify(space-between);
    .flex-direction(row);
}

/* End of mixins */

.tree-view2 {
    font-family: @sans;
    padding: 20px 20px 10px 25px;
    ul.parents {
        padding: 0px 5px 0px 10px;
        list-style: none;
        li.parent {
            position: relative;
        }
    }
    .parent-heading {
        .flex();
        .flex-direction(row);
        .flex-justify(flex-begin);
        .flex-align-items(flex-end);
        font-size: 16px;
        color: @shard-title-color;
        margin: 10px 0;
        span.numkeys {
            margin-left: 30px;
            font-size: 16px;
            .icon-before(@bars-icon);
        }
        &::before {
            // The dashed vertical line and shard's endcap for the tree image
            .dummy-before-boilerplate();
            top: 4.5px;
            bottom: 16px;
            width: 7px;
            left: -14px;
            background-image: @list-square-bullet, @list-vert-dash;
            background-position: left top, 2.5px center;
            background-repeat: no-repeat, repeat-y;
        }
    }
    .parent-title {
        display: inline-block;
        font-size: 16px;
        word-wrap: break-word;
        white-space: nowrap;
    }
    ul.children {
        padding-left: 5px;
        color: @text-color;
        margin-bottom: 10px;
    }
    li.child {
        @role-width: 205px;
        @state-width: 181px;
        .flex-evenly-spaced-centered;
        border-bottom: 1px solid @status-separator-color;
        padding: 7px 0px;
        font-size: 14px;
        .child-role {
            width: @role-width;
            position: relative;
            &.primary {
                .icon-before(@layers-icon);
                font-weight: bold;
                &.goal {
                    font-weight: normal;
                    .icon-before(@layers-exclamation-icon);
                }
            }
            &.secondary {
                .icon-before(@grid-icon);
            }
        }
        .child-name {
            margin-left: 10px;
            width: 35%;
            position: relative; // needed to position bullet and dash
            &:before  {
                .dummy-before-boilerplate;
                width: 22px;
                top: 0;
                bottom: 0px;
                left:-30px;
                background-image: @list-square-bullet, @list-horiz-dash;
                background-position: right center, 3.5px center;
                background-repeat: no-repeat, repeat-x;
            }
        }
        .state {
            margin-left: 10px;
            text-align: right;
            width: @state-width;
            &.yellow {.icon-after(@yellow-light-icon);}
            &.red {.icon-after(@red-light-icon);}
            &.green {.icon-after(@green-light-icon);}
        }
    }
}

.profile-row {
    border-top: thin solid @dividing-line-color;
    &:first-child {
        border-top: thin solid transparent;
    }
    position: relative;
    p {
        font-family: @sans;
        color: @profile-description-blue;
        font-size: 15px;
        line-height: 20px;
        margin-left: 30px;
        overflow: hidden;
        text-overflow: ellipsis;
        .big {
            color: @text-color;
            font-size: 24px;
            line-height: 30px;
        }
        .tags, &.admonition {
            font-size: 18px;
            color: @text-color;
        }

    }
    &.hostname::before {
        .ionicon-before(@hostname-icon);
    }
    &.version::before {
        .ionicon-before(@version-icon);
    }
    &.uptime::before {
        .ionicon-before(@uptime-icon);
    }
    &.cache-size::before {
        .ionicon-before(@cache-size-icon, 3px);
    }
    &.tags::before {
        .ionicon-before(@tags-icon, 1px, -5px);
    }

}

table.servers-list {
    padding: 2px 11px !important;
    min-width: 940px;
    max-width: 940px;
    background: @almost-white;
    border-radius: 4px;
    border-collapse: separate;
    border-spacing: 0 10px;
}
.server-shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
tr.server-container {
    @bar_height: 44px;
    background: white;

    @border-padding: 20px;
    @outer-border-style: 1px solid @light-border-color;
    @offset: 8px;
    @line-height: @bar_height - @offset*2;
    font-family: @sans;
    .server-shadow;
    td {
        @offset: 8px;
        border-bottom: @outer-border-style;
        border-top: @outer-border-style;
        margin: 0px 0px;
        padding: 10px;
        &:first-child {
            border-radius: 3px 0px 0px 3px;
            border-left: @outer-border-style;
        }
        &:last-child {
            border-radius: 0px 3px 3px 0px;
            border-right: @outer-border-style;
        }
    }
    .name {
        background: @border-padding center no-repeat url('images/server-icon.png');
        padding-right: 20px;
        padding-left: 60px;
        a {
            color: @link-color;
            font-size: 16px;
            font-weight: bold;
        }
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .tags {
            border-left: 0px;
            font-weight: normal;
            font-size: 13px;
            margin-left: 5px;
            color: @light-text-color;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }
    .quick-info {
        color: @alternate-text-color;
        padding-left: 20px;
        padding-right: 20px;
        white-space: nowrap;
        .highlight {
            font-weight: bold;
        }
    }
}

.dashboard-container {
    .recent-logs {
        & > h2.title {
            border-bottom: thin solid @dividing-line-color;
            padding-bottom: 22px;
            margin-bottom: 0;
        }
        .btn.view-logs { float: right; }
        ul.log-entries { margin-bottom: 5px; }
        // This overrides some of the common styles used on other log pages
        h1 { display: none; }
        #log-view {
            padding: 0px;
            border: 0px;
            box-shadow: none;
            .log-entry {
                padding-top: 5px;
                padding-bottom: 5px;
                background-position: left center;
            }

        }
    }
    .cluster-status {
        padding: 0 !important;
        width: 940px;
        margin-left: auto;
        margin-right: auto;
        overflow: auto;
        border-collapse: collapse;

        .flex();
        .flex-justify(space-between);
        .panel {
            border: thin solid @dividing-line-color;
            .flex-grow(0);
            .flex-shrink(0);
            .flex-basis(233px);
            vertical-align: top;
            overflow: hidden;
            white-space: nowrap;
            .flex();
            .flex-align-items(center);
            .dashboard-panel {
                padding: 20px;
                text-overflow: ellipsis;
                margin-left: 5%;
            }
            h3 {
                margin-top: 0;
                margin-bottom: 8px;
                font-family: @serif;
                font-size: 17px;
                color: @lighter-dark-slate-gray;
                padding-left: 21px;
            }

            .no-problems-detected h3 {
                background: 0 3px no-repeat url('images/green-light.png');
            }
            .problems-detected h3 {
                background: 0 3px no-repeat url('images/red-light.png');
            }
            ul {
                padding-left: 0;
                margin-bottom: 0px;
                margin-top: 0px;
            }
            li {
                list-style: none;
                font-family: @sans;
                font-size: 14px;
                line-height: 22px;
                margin: 0;
                color: @lighter-dark-slate-gray;
                span.good { color: @status-good-green; }
                span.bad { color: @status-bad-red; }
                span.good, span.bad { font-weight: bold; }
                span.highlight {
                    font-weight: bold;
                }
            }

            &.first { border-left: none; }

        }
    }
    .ops-plot {
        /* GPU acceleration */
        -webkit-transform : translateZ(0);
        -o-transform : translateZ(0);
        -moz-transform : translateZ(0);
        transform : translateZ(0);
        /* For Safari */
        -webkit-perspective: 1000;
        -webkit-backface-visibility: hidden;

        @plot_height: 300px;

        .ops-plot-legend {
            float: right;
            color: @axis-label-fill-color;
            font: 15px @serif;
            text-align: right;

            .element {
                display: inline-block;
                vertical-align: top;
                margin-left: 40px;
                p {
                    margin: 0;
                    margin-left: 23px;
                    line-height: 15px;
                }
            }

            .reads .color { background-color: @reads-plot-color; }
            .writes .color { background-color: @writes-plot-color; }

            /* concentric circles for legend element */
            .color {
                @radius: 4px;
                width: @radius*2;
                height: @radius*2;
                border-radius: @radius;
                margin: 2px;
            }

            .outer-circle {
                @radius: 6px;
                width: @radius*2;
                height: @radius*2;
                border-radius: @radius;
                border: thin solid @light-border-color;
                float: left;
            }

        }
        .plot-container {
            background-color: white;
            border: thin solid @plot-border-color;
            border-radius: 4px;
            padding: 10px;
        }
        .plot {
            position: relative;
            .chart {
                border: none;
                z-index: 150;
                position: relative;
                overflow: hidden;
                display: inline-block;

                .title { display: none; }
                .value { display: none; }
                canvas { display: block; }
            }

            // make room for the vaxis on the left
            .chart, .haxis, .hgrid, .line { margin-left: 34px; }

            // common styles
            .haxis, .vaxis, .hgrid, .vgrid {
                // NOTE: because the plot is laid out poorly,
                // this font size matter a lot. It will define
                // how aligned the vaxis labels are with the
                // vaxis grid. Adjust according to the font
                // being used. Ugly hack!
                font: 7px @sans;
                line {
                    stroke: @plot-border-color;
                    shape-rendering: crispEdges;
                }
                opacity: 1;
                line {  opacity: 1; }
            }

            // labels on the axes
            .vaxis text, .haxis text {
                font: 13px @sans;
                fill: @axis-label-fill-color;
                -webkit-transition: fill-opacity 250ms linear;
            }

            // vaxis and vgrid
            .vaxis {
                margin-top: -1 * (@plot_height + 26px);
                .tick { display: none; }
            }
            .vgrid {
                position: absolute;
                top: 0;
                left: 0px;
            }

            // haxis and hgrid
            .haxis { margin-top: -9px; }
            .hgrid {
                display: none;

                height: @plot_height;
                position: absolute;
                top: -3px;
                left: 0;
            }

            .line {
                background: black;
                opacity: .2;
                z-index: 2;
            }
        }
    }
}